<style media="screen">
  #withdrawFLow .block-title{
    font-weight: 500;
    font-size: 14px;
    color:#929BA8;
    height: 40px;
    line-height: 40px;
  }
  </style>
  
  <section id="withdrawFLow">
      <ul class="contract-flow-nav">
          <li :class="{active:item.iscur}" v-for="(item,index) in nav" @click="switchNav(item,index)">{{item.name}}</li>
          <span class="nav-title">我的流程-意向详情</span>
      </ul>
      <div class="layout">
          <!--意向信息-->
          <section v-show="loadWithdrawMesModule">
            <div>
              <div class="font-14 color-gray mt-10">意向信息</div>
              <div>
                <div class="dy-flex mt-10">
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向编号：</div>
                    <div class="dy-fx-3">{{data.intentCode || '--'}}</div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向<span v-if="data.intentType == 'ER'">面积</span><span v-if="data.intentType == 'WR'">工位</span>：</div>
                    <div class="dy-fx-3">{{data.intentAcreage || '0'}}㎡</div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向时间：</div>
                    <div class="dy-fx-3">{{data.intentStartDate | dateTimeYYmmDD}} 至 {{data.intentEndDate | dateTimeYYmmDD}}</div>
                  </div>
                </div>
                <div class="dy-flex mt-10">
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向状态：</div>
                    <div class="dy-fx-3">{{data.auditStatusVal || '--'}}</div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向车位：</div>
                    <div class="dy-fx-3">{{data.intentParkingNum || '0'}}个</div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">意向类型：</div>
                    <div class="dy-fx-3">{{data.intentType == 'ER' ? '整租' : '工位'}}</div>
                  </div>
                </div>
                <div class="dy-flex mt-10" v-if="data.intentBillId || data.refundBillId">
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999" v-if="data.intentBillId">意向账单：</div>
                    <div class="dy-fx-3" v-if="data.intentBillId"><a target="_blank" :href="'#/billDetail?id='+data.intentBillId+'&aid=undefined&page=billList&ddtab=true'">{{data.intentBillNo
                        || '--'}}</a></div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999" v-if="data.refundBillId">退款账单：</div>
                    <div class="dy-fx-3" v-if="data.refundBillId"><a target="_blank" :href="'#/billEdit?id='+data.refundBillId+'&aid=undefined&page=billList&ddtab=true'">{{data.refundBillNo
                        || '--'}}</a></div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999"></div>
                    <div class="dy-fx-3"></div>
                  </div>
                </div>
                <div class="dy-flex mt-10">
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">创建人：</div>
                    <div class="dy-fx-3">
                      <span>{{data.createUser || '--'}}</span>
                      <span class="color-999 ml-5">({{data.createTime | dateTime}})</span>
                    </div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">确认人：</div>
                    <div class="dy-fx-3">
                      <span>{{data.confirmUser || '--'}}</span>
                      <span class="color-999 ml-5">({{data.confirmTime | dateTime}})</span>
                    </div>
                  </div>
                  <div class="dy-fx-1 dy-flex">
                    <div class="dy-fx-1 color-999">更新人：</div>
                    <div class="dy-fx-3">
                      <span>{{data.lastUpdateUser || '--'}}</span>
                      <span class="color-999 ml-5">({{data.lastUpdateTime | dateTime}})</span>
                    </div>
                  </div>
                </div>
          
              </div>
              <div style="marginTop:20px;">
                <div class="color-gray">意向资源</div>
          
                <div class="mt-10" v-if="unitList.length">
                  <div>单元({{unitCount}}m²)</div>
                  <div class="dy-flex gradient-color line-height-40 text-center border">
                    <div class="dy-fx-2">项目</div>
                    <div class="dy-fx-2">楼栋</div>
                    <div class="dy-fx-2">楼层</div>
                    <div class="dy-fx-5">单元</div>
                  </div>
                  <div class="dy-flex line-height-40 text-center border-b" v-for="item in unitList">
                    <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
                    <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
                    <div class="dy-fx-2 border-r">{{item.floor}}</div>
                    <div class="dy-fx-5 border-r text-left">
                      <div class="pl-12 pr-12">
                        <span v-for="(item0, index0) in item.children">{{item0.unitName}}({{item0.acreage}}m²)<span v-if="!(index0 == item.children.length-1)">、</span></span>
                      </div>
                    </div>
                  </div>
                </div>
          
                <div class="mt-10" v-if="wpCount">
                  <div>工位({{wpCount}}个)</div>
                  <div class="dy-flex gradient-color line-height-40 text-center border">
                    <div class="dy-fx-2">项目</div>
                    <div class="dy-fx-2">楼栋</div>
                    <div class="dy-fx-2">楼层</div>
                    <div class="dy-fx-2">单元</div>
                    <div class="dy-fx-2">工位数</div>
                    <div class="dy-fx-5">工位</div>
                  </div>
                  <div class="dy-flex line-height-40 text-center border-b" v-for="item in wplist">
                    <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
                    <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
                    <div class="dy-fx-2 border-r">{{item.floor}}</div>
                    <div class="dy-fx-2 border-r">{{item.unitName}}</div>
                    <div class="dy-fx-2 border-r">{{item.children.length}}</div>
                    <div class="dy-fx-5 border-r text-left">
                      <div class="pl-12 pr-12">
                        <span v-for="(item0, index0) in item.children">{{item0.wpName}}<span v-if="!(index0 == item.children.length-1)">、</span></span>
                      </div>
                    </div>
                  </div>
                </div>
          
                <div class="mt-10" v-if="stCount">
                  <div>车位({{stCount}}个)</div>
                  <div class="dy-flex gradient-color line-height-40 text-center border">
                    <div class="dy-fx-2">项目</div>
                    <div class="dy-fx-2">楼栋</div>
                    <div class="dy-fx-2">楼层</div>
                    <div class="dy-fx-2">单元</div>
                    <div class="dy-fx-2">车位数</div>
                    <div class="dy-fx-5">车位</div>
                  </div>
                  <div class="dy-flex line-height-40 text-center border-b" v-for="item in stlist">
                    <div class="dy-fx-2 border-l border-r dy-center">{{item.projectName}}</div>
                    <div class="dy-fx-2 border-r dy-center">{{item.buildingName}}</div>
                    <div class="dy-fx-2 border-r">{{item.floor}}</div>
                    <div class="dy-fx-2 border-r">{{item.unitName}}</div>
                    <div class="dy-fx-2 border-r">{{item.children.length}}</div>
                    <div class="dy-fx-5 border-r text-left">
                      <div class="pl-12 pr-12">
                        <span v-for="(item0, index0) in item.children">{{item0.stopName}}<span v-if="!(index0 == item.children.length-1)">、</span></span>
                      </div>
                    </div>
                  </div>
                </div>
          
          
              </div>
              <div style="marginTop: 20px;">
                <div class="line-height-34">
                  <span class="color-999 mr-24">意向金金额：</span>
                  <span class="color-666">{{data.intentAmount || '0'}}</span>
                </div>
                <div class="line-height-34">
                  <span class="color-999 mr-24">可抵扣金额：</span>
                  <span class="color-666">{{data.intentDeductibleAmount || '0'}}</span>
                </div>
                <div class="line-height-34">
                  <span class="color-999 mr-24">截止付款时间：</span>
                  <span class="color-666">{{data.intentPaymentDeadline | dateTimeYYmmDD}}</span>
                </div>
                <div class="dy-flex line-height-34">
                  <span class="color-999 dy-fx-1">备注：</span>
                  <span class="color-666 dy-fx-13">{{data.memo || '--'}}</span>
                </div>
              </div>
          
              <div style="marginTop: 20px;">
                <div class="color-gray">客户信息</div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">客户类型：</span>
                    <span class="color-666">{{data.zlfInfo.zlfTypeVal}}</span>
                  </div>
                  <div class="dy-fx-1"></div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">渠道分类：</span>
                    <span class="color-666">{{data.zlfInfo.channelCategoryVal || '--'}}</span>
                  </div>
                  <div class="dy-fx-1">
                    <span class="color-999">渠道名称：</span>
                    <span class="color-666">{{data.zlfInfo.channelNameVal || '--'}}</span>
                  </div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">客户名称：</span>
                    <span class="color-666">{{data.zlfInfo.zlfName || '--'}}</span>
                  </div>
                  <div class="dy-fx-1">
                    <span class="color-999">所属行业：</span>
                    <span class="color-666">{{data.zlfInfo.zlfIndustryVal || '--'}}</span>
                  </div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">纳税人识别号：</span>
                    <span class="color-666">{{data.zlfInfo.idcode || '--'}}</span>
                  </div>
                  <div class="dy-fx-1">
                    <span class="color-999"><span v-if="data.zlfInfo.zlfType == 'QY'">公司</span><span v-if="data.zlfInfo.zlfType == 'PE'">个人</span>邮箱：</span>
                    <span class="color-666">{{data.zlfInfo.email || '--'}}</span>
                  </div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">公司法人：</span>
                    <span class="color-666">{{data.zlfInfo.zlfSperson || '--'}}</span>
                  </div>
                  <div class="dy-fx-1">
                    <span class="color-999">联系电话：</span>
                    <span class="color-666">{{data.zlfInfo.zlfSphone || '--'}}</span>
                  </div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">合同联系人：</span>
                    <span class="color-666">{{data.zlfInfo.zlfLperson || '--'}}</span>
                  </div>
                  <div class="dy-fx-1">
                    <span class="color-999">联系电话：</span>
                    <span class="color-666">{{data.zlfInfo.zlfLphone || '--'}}</span>
                  </div>
                </div>
                <div class="dy-flex line-height-34">
                  <div class="dy-fx-1">
                    <span class="color-999">联系地址：</span>
                    <span class="color-666">{{data.zlfInfo.zlfAddress || '--'}}</span>
                  </div>
                </div>
              </div>
            </div>
              <!-- 审核 -->
              <!--退租审核页面、待业务审核或者待财务审核状态下显示审核按钮-->
              <div class="mt-10"></div>
              <button class="n-btn-primary btn mr-10 audit-pass"
                      v-if="(flowState && auditState === 'WA' && approveFlag == 'Y' )"
                      @click="passAudit">
                  审核通过
              </button>
              <button class="n-btn-outline btn audit-no-pass mr-10"
                      v-if="(flowState && auditState === 'WA' && approveFlag == 'Y' )"
                      @click="notPassAudit">审核不通过
              </button>
              <!--退租详情页面、流程状态为'进行中'且用户为流程的启动者可以撤回-->
              <button class="btn n-btn-primary mr-5" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState"
                      @click="withdrawCH">撤回
              </button>
              <button class="btn n-btn-outline" v-if="bpm.state === 'ON' && userid === bpm.starterId && !flowState"
                      @click="cuiban">催办
              </button>
          </section>
          <!--流程信息-->
          <section v-show="loadFlowMesModule">
              <div class="border-b pb-10">
                  <h4 class="block-title">流程信息</h4>
                  <div class="row">
                      <div class="col-md-1 liuceng-title color-999">流程编号：</div>
                      <div class="col-md-9 item">{{bpm.bpmNo}}</div>
                  </div>
                  <div class="row">
                      <div class="col-md-1 liuceng-title color-999">耗时：</div>
                      <div class="col-md-9 item">{{calculateTimeDifference(bpm.startTime,bpm.endTime)}}</div>
                  </div>
                  <div class="row">
                      <div class="col-md-1 liuceng-title color-999">发起人：</div>
                      <div class="col-md-9 item">{{bpm.starterName | formatUndefined}}</div>
                  </div>
                  <div class="row">
                      <div class="col-md-1 liuceng-title color-999">发起时间：</div>
                      <div class="col-md-3 item">{{bpm.startTime | formatDetailDate}}</div>
                  </div>
                  <div class="row" v-if="bpm.userName">
                      <div class="col-md-1 liuceng-title color-999">当前处理人：</div>
                      <div class="col-md-9 line-height-34 pl-0">{{bpm.userName | formatUndefined}}</div>
                  </div>
                  <div class="row" v-if="bpm.currPhase">
                      <div class="col-md-1 liuceng-title color-999">当前处理节点：</div>
                      <div class="col-md-9 item">{{bpm.currPhase}}</div>
                  </div>
              </div>
              <div class="pb-10 border-b">
                  <h4 class="block-title">流程图</h4>
                  <div class="business-liuceng-image-cr">
                      <div class="content">
                          <div class="flowlist-image">
                              <div class="begin-circle">开始</div>
                              <div class="middle-node-container relative">
                                <ul class="middle-node-wrapper clearfix">
                                  <li class="node-item" v-for="(item,index) in flowNode">
                                    <div class="node-order">
                                      <span>{{index + 1}}</span>
                                    </div>
                                    <div class="node-name">{{item.name}}</div>
                                    <p class="person" v-if="item.userNames.length">{{item.userNames.join('/')}}</p>
                                  </li>
                                </ul>
                              </div>
                              <div class="end-circle">结束</div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="pb-10" v-if="bpmList.length">
                  <h4 class="block-title">处理历史</h4>
                  <div class="deal-history-table box-i-shadow-1 br-4">
                      <div class="table-title">
                          <div class="table-item1">时间</div>
                          <div class="table-item2">处理人</div>
                          <div class="table-item3">操作说明</div>
                          <div class="table-item4">信息</div>
                      </div>
                      <ul class="table-content" v-for="item in bpmList">
                          <li class="table-item1">{{item.endTime | formatDetailDate}}</li>
                          <li class="table-item2">{{item.fnUserName | formatUndefined}}</li>
                          <li class="table-item3">{{item.taskName | formatUndefined}}</li>
                          <li class="table-item4">{{item.memo | formatUndefined}}</li>
                      </ul>
                  </div>
              </div>
  
          </section>
          <!--文件信息-->
          <section v-show="loadxdFlowMesModule">
            <div class="contract-file-container">
              <div class="upload-head-contract clearfix border-b pb-10">
                <div class="pull-left font-16 line-height-34">文件列表</div>
              </div>
              <div>
                <ul>
                  <li class="clearfix border-b" v-for="(item,index) in data.attachments">
                    <p class="icon-Nav-contract-file file-name">
                      <span>{{item.name}}</span>
                    </p>
                    <p class="pull-right line-height-45 file-btn dy-flex opera-but" style="align-items: center;height: 45px">
                      <span class="block-D-P-D"></span>
                      <a  class="icon-GM-preview" @click="previewImage(item.url)">
                          <b>预览</b>
                      </a>
                      <span class="block-D-P-D"></span>
                      <a :href="item.url" :download="item.name" class="icon-Gm-download">
                          <b>下载</b>
                      </a>
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </section>
      </div>
      <!-- 单元详情 -->
      <unit-details :unit-id="unitId" :unit-details-flag="unitDetailsFlag" @close="closeUnitPop"></unit-details>
  </section>
  <script src="modules/rent/scripts/unit_details.js" charset="utf-8"></script>
  <script src="modules/workbench/scripts/intentionFlow.js" charset="utf-8"></script>
  <script src="modules/contract/scripts/contract_public.js" charset="utf-8"></script>
  